<template>
	<view class="head">
		<view class="img" @click="back">
			<image src="https://splendid.oss-cn-beijing.aliyuncs.com/static/zhengyulan/back-arrow.png" mode=""></image>
		</view>
		<view class="message">
			<text>任务派发</text>
		</view>
	</view>


	<view class="body">
		<view class="container">
			<view class="coantent">
				<view class="vvf">
					<view class="text">
						派发给
					</view>
					<view class="selselist">
						
							<!-- <image src="/static/xila.png" mode="" @click="toggleDropdown"></image> -->
							<uni-data-select v-model="value" :localdata="range" @change="change"
								>
								<view class="selecttext">
									</view>
								</uni-data-select>
						
					</view>
					<view class="qiyename">
						{{ type === 0 ? '企业名称' : '接收人员' }}
					</view>
					<view class="chose" @click="chose(type)">
						选择
					</view>
					<view class="qiyenams">
						<view class="jhuu">
							<view>{{ name }}</view>
						</view>
					</view>

					<view class="qiyenameq">
						任务名称
					</view>
					<view class="qiyenamss">

						<view class="jhuu">
							<input type="text" placeholder="请输入任务名称" />
						</view>
					</view>




					<view class="renwucpnten">
						任务称内容
					</view>
					<view class="inp">
						<textarea name="" id="" cols="30" rows="10" placeholder="请输文字内容"></textarea>
					</view>
					<view class="times">
						<text>任务时间</text>
						<view class="example-body">
							<uni-datetime-picker v-model="rangeS" type="daterange" @maskClick="maskClick" />
						</view>
					</view>

					<button class="paifa">派发</button>

				</view>
			</view>
		</view>
	</view>

<!-- 企业 -->
	<view class="mak" v-show="hidden">
		<view class="conten">
			<view class="input">
				<view class="inp">
					<input type="text" placeholder="搜索公司名称" v-model="corporatename" />
				</view>
				<view class="search">
					<image src="https://splendid.oss-cn-beijing.aliyuncs.com/static/zhengyulan/search.png" mode="" @click="serch"></image>
				</view>
			</view>
			<view class="mask-conten">
				<view class="check">
					<scroll-view scroll-y="true" style="height: 700rpx;">
						<checkbox-group class="uni-list" @change="checkboxChange">
							<label class="uni-list-cell uni-list-cell-pd" v-for="item in checkboxItems"
								:key="item.name">
								<view>
									<checkbox :value="item.name" :checked="item.checked" />
								</view>
								<view class="text">{{ item.value }}</view>
							</label>
						</checkbox-group>
					</scroll-view>
					<button class="quren" @click="send">确认</button>
				</view>
				<view class="closs" @click="closs">
					<image src="https://splendid.oss-cn-beijing.aliyuncs.com/static/zhengyulan/chahao.png" mode=""></image>
				</view>
			</view>
		</view>
	</view>

	<!-- 个人 -->
	<view class="maks" v-show="hiddenpeople">
		<view class="conten">
			<view class="input">
				<view class="inp">
					<input type="text" placeholder="搜索人员信息" v-model="corporatename" />
				</view>
				<view class="search">
					<image src="https://splendid.oss-cn-beijing.aliyuncs.com/static/zhengyulan/search.png" mode="" @click="serch"></image>
				</view>
			</view>

			<view class="zhongdui">
				<view class="one-dui">
					<view class="yizhongdui">
						<scroll-view scroll-y="true"  style="height: 700rpx;">
							<checkbox-group >
								<view class="zhongduis" v-for="(item,index) in peoploe">
									<label>
										<checkbox :value="item.name"  :checked="item.checked" /><text class="namehy" @click="chosepeople(index)"> {{item.name}}</text>
									</label> 
									<view class="peoplelist" v-show="opcity">
										<checkbox-group @change="chosepeoples">
										<view class="zhongduis" v-for="(item,index) in peoplenamelist">
										<label>
											<checkbox :value="item.value"  :checked="item.checked" /> {{item.name}}
										</label> 
										</view>
										</checkbox-group>
									</view>
								</view>
							</checkbox-group>
						</scroll-view>
						
					</view>
				</view>
			</view>
        <button class="success" @click="success">确认</button>
		<view class="closss" @click="peoplecloss">
			<image src="/static/chahao.png" mode=""></image>
		</view>
		</view>
	</view>

</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue'
	var type = ref()

function back (){
	uni.navigateBack({
		delta:1
	})
}


	function change(e) {
		type.value = e

	}

	var range = ref([{
			value: 0,
			text: "企业"
		},
		{
			value: 1,
			text: "个人"
		},

	])


	// 遮罩层 逻辑

	const checkboxItems = reactive([{
			name: '郑州爱丽爸爸会有限技术公司',
			value: '郑州爱丽爸爸会有限技术公司',
			checked: false
		},
		{
			name: '郑州全会有c限技术公司',
			value: '郑州全会有c限技术公司',
			checked: false
		}, {
			name: '郑州全会有限技b术公司',
			value: '郑州全会有限技术b公司',
			checked: false
		}, {
			name: '郑州全会有限技q术公司',
			value: '郑州全会有限技术q公司',
			checked: false
		}, {
			name: '郑州全会有限技m术公司',
			value: '郑州全会有限技m术公司',
			checked: false
		}, {
			name: '郑州全会有限技s术公司',
			value: '郑州全会有限s技术公司',
			checked: false
		}, {
			name: '郑州全会有限技v术公司',
			value: '郑州全会有限v技术公司',
			checked: false
		}, {
			name: '郑州全会有限f技术公司',
			value: '郑州全会有限f技术公司',
			checked: false
		}, {
			name: '郑州全会有限技g术公司',
			value: '郑州全会有限g技术公司',
			checked: false
		}, {
			name: '郑州全会有限a技术公司',
			value: '郑州全会有限f技术公司',
			checked: false
		}, {
			name: '郑州全会有限f技术公司',
			value: '郑州全会有限q技术公司',
			checked: false
		}, {
			name: '郑州全会有限技术r公司',
			value: '郑州全会有限技r术公司',
			checked: false
		}
	])
	// 派发个人

	const peoploe = ref([{
			name: "一中队",
			value: "一中队",
			checked: true
		}, {
			name: "二中队",
			value: "二中队",
			checked: true
		},
		{
			name: "三中队",
			value: "三中队",
			checked: true
		}, {
			name: "四中队",
			value: "四中队",
			checked: true
		}
	])


const peoplenamelist = ref( [
	{
			name: "李青",
			value: "李青",
			checked: false
		}, {
			name: "张晶晶",
			value: "张晶晶",
			checked: false
		},
		{
			name: "高宇轩",
			value: "高宇轩",
			checked: false
		}, {
			name: "李丽航",
			value: "李丽航",
			checked: false
		}
])



	// 数据绑定
	var corporatename = ref("")
	var hidden = ref(false)
	// 关闭 遮罩层
	function closs() {
		hidden.value = false
		peoplenamelist.value = false
	}
	// 打开遮罩层
	function chose(e) {
		console.log(e);
		if(e == 0){
			hidden.value = true
		}else if(e == 1){
			hiddenpeople.value = true
		}else{
			uni.showToast({
			  title: '请选择',
			  icon: 'none', // 不显示图标
			  duration: 1000 // 1秒后自动消失
			});
		}
	
	}
	// 确认 发送请求  并 关闭 遮罩成
	function send() {
		hidden.value = false
	}
	// 搜索
	function serch() {
		console.log(corporatename.value);
	}

	// fuxuan 
	var name = ref("请选择企业名称")

	function checkboxChange(e) {
		const selectedValues = e.detail.value
		if (selectedValues.length === 0) {
			name.value = "请选择企业名称"
		} else {
			const selectedLabels = checkboxItems
				.filter(item => selectedValues.includes(item.name))
				.map(item => item.value)
			name.value = selectedLabels.join("、")
		}
	}
	
	// 选择 人员
	var opcity = ref(false)
   var hiddenpeople = ref(false)
	function chosepeople (inde){
		console.log(inde);
		opcity.value = !opcity.value
	}
	function success () {
		hiddenpeople.value = false
	}
	function peoplecloss () {
		hiddenpeople.value = false
	}
	
	
	function chosepeoples(e) {
	  const selectedNames = e.detail.value // ["李青", "张晶晶"]
	console.log(e.detail.value);
	  if (selectedNames.length === 0) {
	    name.value = "请选择接收人员"
	  } else {
	    // 从 peoplenamelist 中找出对应 value 显示
	    const selectedValues = peoplenamelist.value
	      .filter(item => selectedNames.includes(item.name))
	      .map(item => item.value)
	
	    name.value = selectedValues.join('、')
	  }
	}
</script>

<style lang="scss" scoped>
	.uni-list-cell-pd {
		width: 350rpx;
		display: flex;
		justify-content: space-between;
		margin-bottom: 30rpx;

		.text {
			width: 350rpx;
			height: 26rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			font-size: 28rpx;
			color: #333333;
			line-height: 33rpx;
		}
	}

	.quren {
		width: 588rpx;
		height: 88rpx;
		background: #0874FA;
		border-radius: 44rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		font-size: 31rpx;
		color: #FFFFFF;
		margin-top: 30rpx;
	}

	.mak {
		position: fixed;
		width: 100vw;
		height: 100vh;
		background-color: rgba(51, 51, 51, 0.4);
		/* 改成 rgba 实现背景透明 */
		top: 0;
		display: flex;
		align-items: center;
		justify-content: center;

		.conten {
			width: 690rpx;
			height: 1000rpx;
			background: #FFFFFF !important;
			opacity: 1;
			border-radius: 21rpx;
			position: relative;

			.input {
				width: 644rpx;
				height: 73rpx;
				background: #FFFFFF;
				border-radius: 14rpx;
				border: 1px solid #0874FA;
				position: absolute;
				top: 31rpx;
				left: 20rpx;

				.inp {
					position: absolute;
					top: 0rpx;
					left: 0rpx;

					input {
						width: 644rpx;
						height: 73rpx;
						background: #FFFFFF;
						border-radius: 14rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						font-size: 28rpx;
						color: #999999;
						text-indent: 29rpx;
					}
				}


				.search {
					width: 34rpx;
					height: 34rpx;
					position: absolute;
					top: 20rpx;
					right: 34rpx;

					image {
						width: 34rpx;
						height: 34rpx;
					}
				}
			}

			.mask-conten {
				width: 644rpx;
				// height: 300rpx;
				position: absolute;
				top: 145rpx;
				left: 20rpx;

				.check {
					background-color: #FFFFFF;
				}

				.closs {
					width: 57rpx;
					height: 58rpx;
					position: absolute;
					bottom: -130rpx;
					left: 300rpx;

					image {
						width: 57rpx;
						height: 58rpx;
					}
				}
			}
		}
	}

	.head {
		width: 750rpx;
		height: 142rpx;
		background: #0874FA;
		position: relative;
		overflow: hidden;
	}

	.img {
		width: 22rpx;
		height: 38rpx;
		position: absolute;
		top: 75rpx;
		left: 40rpx;

		image {
			width: 22rpx;
			height: 38rpx;
		}
	}

	.message {
		width: 220rpx;
		height: 34rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		font-size: 36rpx;
		color: #FFFFFF;
		line-height: 34rpx;
		position: absolute;
		top: 75rpx;
		left: 270rpx;

		text {
			display: inline-block;
			width: 220rpx;
			height: 34rpx;
			text-align: center;
			line-height: 34rpx;
		}
	}

	.body {
		width: 100%;
		height: 100vh;

		.container {
			width: 750rpx;

			.coantent {
				width: 750rpx;
				height: 1522rpx;
				background-color: #0874FA;
				margin: 0 auto;

				.vvf {
					width: 750rpx;
					height: 1522rpx;
					background-color: #FFFFFF;
					position: relative;

					.text {
						width: 107rpx;
						height: 31rpx;
						font-family: Source Han Sans CN;
						font-weight: 500;
						font-size: 33rpx;
						color: #000000;
						line-height: 31rpx;
						position: absolute;
						top: 41rpx;
						left: 43rpx;
					}

					.selselist {
						width: 667rpx;
						height: 110rpx;
						background: #FAFAFA;
						border-radius: 14rpx;
						border: 1px solid #BFBFBF;
						position: absolute;
						top: 105rpx;
						left: 43rpx;

						.selecttext {
							width: 667rpx;
							height: 110rpx;
							background: #FAFAFA;
							border-radius: 14rpx;
							position: relative;

							text {
								display: inline-block;
								width: 100rpx;
								height: 28rpx;
								font-family: Source Han Sans CN;
								font-weight: 400;
								font-size: 31rpx;
								color: #333333;
								line-height: 28rpx;
								position: absolute;
								top: 36rpx;
								left: 31rpx;
							}

							image {
								width: 38rpx;
								height: 21rpx;
								position: absolute;
								top: 48rpx;
								right: 48rpx;
							}

						}
					}

					.qiyename {
						width: 138rpx;
						height: 31rpx;
						font-family: Source Han Sans CN;
						font-weight: 500;
						font-size: 33rpx;
						color: #000000;
						line-height: 33rpx;
						position: absolute;
						top: 256rpx;
						left: 43rpx;
					}

					.chose {
						width: 144rpx;
						height: 62rpx;
						background: #0874FA;
						border-radius: 14rpx;
						text-align: center;
						line-height: 62rpx;
						position: absolute;
						top: 244rpx;
						right: 42rpx;
						font-weight: 400;
						font-size: 35rpx;
						color: #FFFFFF;
					}

					.qiyenams {
						width: 667rpx;
						min-height: 110rpx;
						background: #FAFAFA;
						border-radius: 14rpx;
						border: 1px solid #BFBFBF;
						position: absolute;
						top: 320rpx;
						left: 42rpx;

						.jhuu {
							width: 667rpx;
							// height: 110rpx;
							background: #FAFAFA;
							border-radius: 14rpx;
							position: relative;

							view {
								// width: 362rpx;
								// height: 29rpx;
								font-family: Source Han Sans CN;
								font-weight: 400;
								// line-height: 4;
								/* 控制行间距 */
								white-space: pre-line;
								font-size: 31rpx;
								color: #BFBEBE;
								// line-height: 29rpx;
								position: absolute;
								top: 36rpx;
								left: 25rpx;
							}
						}
					}
				}
			}
		}
	}


	.qiyenamss {
		width: 667rpx;
		min-height: 110rpx;
		background: #FAFAFA;
		border-radius: 14rpx;
		border: 1px solid #BFBFBF;
		position: absolute;
		top: 536rpx;
		left: 42rpx;

		.jhuu {
			width: 667rpx;
			// height: 110rpx;
			background: #FAFAFA;
			border-radius: 14rpx;
			position: relative;
			color: #BFBEBE;

			input {
				// width: 212rpx;
				// height: 29rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				line-height: 4;
				/* 控制行间距 */
				white-space: pre-line;
				font-size: 31rpx;
				color: #333333;
				line-height: 29rpx;
				position: absolute;
				top: 36rpx;
				left: 25rpx;
			}
		}
	}

	.qiyenameq {
		width: 138rpx;
		height: 31rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		font-size: 33rpx;
		color: #000000;
		line-height: 33rpx;
		position: absolute;
		top: 470rpx;
		left: 43rpx;
	}

	.renwucpnten {
		width: 168rpx;
		height: 31rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		font-size: 33rpx;
		color: #000000;
		line-height: 31rpx;
		position: absolute;
		top: 688rpx;
		left: 43rpx;

	}

	.inp {
		width: 667rpx;
		height: 393rpx;
		position: absolute;
		text-indent: 100;
		top: 745rpx;
		left: 43rpx;

		textarea {
			width: 667rpx;
			height: 393rpx;
			background: #FAFAFA;
			border-radius: 14rpx;
			border: 1px solid #BFBFBF;
			text-indent: 20rpx;
		}
	}

	.times {
		width: 660rpx;
		height: 79rpx;
		position: absolute;
		bottom: 259rpx;
		left: 43rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		text {
			font-family: Source Han Sans CN;
			font-weight: 500;
			font-size: 33rpx;
			color: #000000;
		}

		.example-body {
			width: 515rpx;
			height: 79rpx;
		}
	}

	.paifa {
		width: 672rpx;
		height: 88rpx;
		background: #0874FA;
		border-radius: 44rpx;
		position: absolute;
		color: #FFFFFF;
		bottom: 160rpx;
		left: 43rpx;
	}






	.maks {
		position: fixed;
		width: 100vw;
		height: 100vh;
		background-color: rgba(51, 51, 51, 0.4);
		/* 改成 rgba 实现背景透明 */
		top: 0;
		display: flex;
		align-items: center;
		justify-content: center;

		.conten {
			width: 690rpx;
			height: 1002rpx;
			background: #FFFFFF !important;
			opacity: 1;
			border-radius: 21rpx;
			position: relative;

			.input {
				width: 644rpx;
				height: 73rpx;
				background: #FFFFFF;
				border-radius: 14rpx;
				border: 1px solid #0874FA;
				position: absolute;
				top: 31rpx;
				left: 20rpx;

				.inp {
					position: absolute;
					top: 0rpx;
					left: 0rpx;

					input {
						width: 644rpx;
						height: 73rpx;
						background: #FFFFFF;
						border-radius: 14rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						font-size: 28rpx;
						color: #999999;
						text-indent: 29rpx;
					}
				}


				.search {
					width: 34rpx;
					height: 34rpx;
					position: absolute;
					top: 20rpx;
					right: 34rpx;

					image {
						width: 34rpx;
						height: 34rpx;
					}
				}
			}

			.zhongdui {
				width: 600rpx;
				// height: 300rpx;
				// background-color: #0874FA;
				position: relative;
				position: absolute;
				top: 150rpx;
				left: 24rpx;
				
			}

		}
	}


	.zhongduis{
		margin-top: 10rpx;
	}
	.yizhongdui{
		overflow: hidden;
		height: 800rpx;
	}
	.peoplelist{
		width: 200rpx;
		// height: 300rpx;
		position: relative;
		left: 40rpx;
	}
	.namehy{
		font-family: Source Han Sans CN;
		font-weight: 600;
		font-size: 31rpx;
		color: #333333;
	}
	.success{
		width: 588rpx;
		height: 88rpx;
		background: #0874FA;
		border-radius: 44rpx;
		position: absolute;
		bottom: 20rpx;
		color: #FFFFFF;
		left: 50rpx;
	}
	.closss {
		width: 57rpx;
		height: 58rpx;
		position: absolute;
		bottom: -90rpx;
		left: 300rpx;
		image {
			width: 57rpx;
			height: 58rpx;
		}
	}
</style>